<template>
    <div >
        <div :class="reversed ? 'active' : ''"> {{msg}}</div>
        <button @click="onRotate">镜像反转</button>
        <button @click="onReverse">绑定事件</button>
        <!-- main.js中的全局过滤器也可以在组件中使用 -->
         <div>{{ str | reverse }}</div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            str: "123456",
			msg: 'hello,world',
            reversed: '',
		};
	},
    methods: {
        onReverse () {
            this.msg = this.msg.split('').reverse().join('');
        },
        onRotate () {
            this.reversed = !this.reversed;
        }
    },

    // 组件中的过滤器
    // filters: {
    //     reverse (str) {
    //         return str.split('').reverse().join('');
    //     }
    // },
};
</script>
<style scoped>
    div {
        display: inline-block;
    }
    .active {
        transform: rotateY(180deg) ;
    }
</style>